<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="description" content="">
  		<meta name="keywords" content="">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=0">
		<link rel="stylesheet" href="../libs/jquery.mloading.css" />
		<link rel="stylesheet" href="../css/base.css" />
		<link rel="stylesheet" href="../css/dealRecord.css" />
		<title>交易记录</title>
	</head>
	<body>
		<div class="bg_white deal_record">
			<div class="color_orange dr_select">
				<div class="dr_select_left"><span class="dr_select_left_text">全部交易</span><img src="../images/arrowDown.png" alt="" /></div>
				<div class="dr_select_right"><span class="dr_select_right_text">全部月份</span><img src="../images/arrowDown.png" alt="" /></div>
				<div class="clear"></div>
			</div>
			<div class="rd_list">
				<div class="rd_list_left">
					<div class="color_6">到期取出—固收宝1111</div>
					<div class=" color_9">2016-12-29</div>
				</div>
				<div class="rd_list_right">-4010</div>
				<div class="clear"></div>
			</div>
			<div class="rd_list">
				<div class="rd_list_left">
					<div class="color_6">到期取出—固收宝1111</div>
					<div class=" color_9">2016-12-29</div>
				</div>
				<div class="rd_list_right">-4010</div>
				<div class="clear"></div>
			</div>
			<div class="rd_list">
				<div class="rd_list_left">
					<div class="color_6">到期取出—固收宝1111</div>
					<div class=" color_9">2016-12-29</div>
				</div>
				<div class="rd_list_right">-4010</div>
				<div class="clear"></div>
			</div>
		</div>
		<div class="mask">
	        <div class="popup popup_all">
				<div class="popup_select"><span class="popup_text">全部</span><span class="select select_on"></span></div>       	
				<div class="popup_select"><span class="popup_text">投资</span><span class="select"></span></div>
				<div class="popup_select"><span class="popup_text">取出</span><span class="select"></span></div>
				<div class="popup_select"><span class="popup_text">到期收益</span><span class="select"></span></div>
	        </div>
	        <div class="popup popup_month">
	        	<div class="popup_select"><span class="popup_text">全部月份</span><span class="select select_on"></span></div>
				<div class="popup_select"><span class="popup_text">2016年3月</span><span class="select"></span></div>       	
				<div class="popup_select"><span class="popup_text">2016年2月</span><span class="select"></span></div>
				<div class="popup_select"><span class="popup_text">2016年1月</span><span class="select"></span></div>
				<div class="popup_select"><span class="popup_text">2015年12月</span><span class="select"></span></div>
				<div class="popup_select"><span class="popup_text">2015年11月</span><span class="select"></span></div>
				<div class="popup_select"><span class="popup_text">2015年10月</span><span class="select"></span></div>
	        </div>
   	 	</div>
	</body>
	<script src="../libs/jquery.min.js"></script>
	<script src="../libs/jquery.mloading.js"></script>

</html>
<script>

	$('.dr_select_left').click(function(){
		$('.mask').show();
		$('.popup_month').hide();
		$('.popup_all').show();
	})
	$('.dr_select_right').click(function(){
		$('.mask').show();
		$('.popup_all').hide();
		$('.popup_month').show();
	})
	$('.popup_select').click(function(){
		var num = $('.popup_select').index(this);
		$(this).css('color','#FF5000').siblings().css('color','#333333');
		$('.select').removeClass("select_on");
		$('.select').eq(num).addClass("select_on");
		var text = $('.popup_text').eq(num).text()
		console.log(num)
		console.log(text)
		if(num<4){
			$('.dr_select_left_text').text(text)
		}else{
			$('.dr_select_right_text').text(text)
		}
	})
	$('.mask').click(function(){
		$(this).hide()
	})
</script>
